<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回车发布评论案例</title>
    <style>
        .wrapper {
            width: 800px;
            display: flex;
            justify-content: flex-end;
        }

        .wrapper textarea {
            height: 50px;
            flex: 1;
            padding: 10px;
            border-radius: 4px;
            border-color: #e4e4e4;
            background: #fff;
            outline: none;
            resize: none;
        }

        .wrapper button {
            width: 70px;
            margin-left: 10px;
            border: none;
            color: #fff;
            background: #00aeec;
            border-radius: 4px;
            cursor: pointer;
        }

        .wrapper .total {
            margin-right: 80px;
            margin-top: 5px;
            color: #999;
        }

        .list {
            width: 800px;
            border: 1px solid #efce9c;
            background-color: rgb(231, 238, 191);
            padding: 10px;
        }

        .list p {
            font-size: 12px;
        }

        .msg {
            height: 20px;
            background-color: rgb(187, 249, 248);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
        <button>发布</button>
    </div>
    <div class="wrapper">
        <span class="total">0/200字</span>
    </div>
    <div class="list">
        <!--新评论-->
    </div>
    <script src="../lib/axios.js"></script>

    <script>

        // 获取评论
        function getList() {
            axios({
                url: 'https://hmajax.itheima.net/api/cmtlist',
                params: {
                    page: 1
                }
            })
                .then(res => {
                    const listBox = document.querySelector('.list')
                    listBox.innerHTML = ''
                    res.data.data.forEach(item => {
                        listBox.innerHTML += `
                    <p data-id="${item.id}" class="msg">${item.content}</p>
                    `
                    })
                })
                .catch(err => {
                    alert(err.response.data.message)
                })
        }

        // 新增评论
        function newList() {

            const contentBox = document.querySelector('#tx')

            contentBox.addEventListener('keyup', function (e) {
                if (e.key === 'Enter' && this.value.trim) {
                    axios({
                        url: 'https://hmajax.itheima.net/api/addcmt',
                        method: 'POST',
                        data: {
                            username: '张三',
                            content: this.value
                        }
                    })
                        .then(res => {
                            this.value = ''
                            getList()
                        })
                        .catch(err => {
                            alert(err.response.data.message)
                        })
                }
            })
        }

        // 删除评论
        function delList() {

            document.querySelector('.list').addEventListener('click', function (e) {

                if (e.target.tagName.toLowerCase() === 'p') {
                    const id = e.target.dataset.id
                    if (id) {
                        axios({
                            url: 'https://hmajax.itheima.net/api/delcmt',
                            params: {
                                id: id
                            }
                        })
                            .then(res => {
                                console.log(res.data)
                                getList()
                            })
                            .catch(err => {
                                alert(err.response.data.message)
                            })
                    }

                }

            })

        }
        //函数调用
        getList()
        newList()
        delList()

    </script>
</body>

</html>